@import '../../fileConfig/index.scss';

.c-multiVersionComp__intail {
	margin-top: 20px;

	&__row {
		margin-bottom: 20px;

		.ant-col:first-child {
			text-align: right;
		}

		.ant-col:last-child {
			text-align: left;
		}
	}

	&__title {
		color: #333;
		font-size: 12px;
	}

	&__container {
		display: flex;
		justify-content: center;
		margin-top: 20px;

		&__desc:last-child {
			margin-right: 0;
		}

		&__desc {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-width: 128px;
			height: 48px;
			margin-right: 20px;
			padding: 10px 22px 10px 16px;
			border: 1px solid var(--panel-border);
			border-radius: 0;
			cursor: pointer;

			&:hover {
				border: 1px solid #3f87ff;
			}

			span.comp-name {
				line-height: 48px;

				img {
					display: inline-block;
					width: 28px;
					margin-right: 8px;
				}

				span {
					font-weight: 500;
					font-size: 12px;
				}
			}

			.anticon-right-circle {
				margin-left: 30px;
				color: #3f87ff;
				font-size: 8px;
			}
		}
	}
}

.c-multiVersionComp {
	position: relative;
	flex: 1;
	height: 100%;
	overflow: hidden;

	&__tabs {
		height: 100%;

		div.ant-tabs-nav {
			margin: 0;
			border: unset;

			&::before {
				z-index: 99;
			}

			.ant-tabs-nav-wrap > .ant-tabs-nav-list {
				min-width: 100px;
				height: 44px;

				.ant-tabs-tab-btn {
					width: $file-size;
					height: 44px;
					margin: 0;
					padding: 0;
					font-size: 14px;
					line-height: 44px;
					text-align: center;
					background: var(--tab-inactiveBackground);
				}

				.ant-tabs-tab-active {
					.ant-tabs-tab-btn {
						background: var(--tab-activeBackground);
					}
				}

				.ant-tabs-ink-bar {
					display: none;
				}

				.ant-tabs-tab + .ant-tabs-tab {
					margin: 0;
				}
			}
		}

		.ant-tabs-tabpane {
			display: flex;
		}
	}
}
